/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { TextInput, Text, View, Dimensions, TouchableHighlight, StyleSheet, ImageBackground } from 'react-native';
import { Icon,  List, Button, InputItem, Tabs, TextareaItem, DatePicker } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Help_FeedBack extends PageBase {
	constructor(props) {
        super(props);
		this.state = {
            // 反馈类型变量
			type:[
                {name: '功能意见'},
                {name: '使用问题'},
                {name: '性能问题'},
                {name: '其他问题'}
            ],
            type:'功能问题',
            // 用户手机号变量（需要隐藏中间四位）
            phone:'',
		};
    }

    // 类型
    changeType = (value) => {
        this.setState({
            type:value,
        })
        // alert(value)
    }

    // 提交
    submit(){

    }

    /************************************************************************************ Render */
	render() {
		return (
			<CPage>
				
				<CScroll mt='96' bg='#efeff4'>
                    <CColumn style={{backgroundColor:'#fff',marginTop:10, paddingLeft:15,paddingRight:15,paddingBottom:15}}>

                        {/* 反馈类型标题 */}
                        <CRow mt='20' h='60' y='center' bb='1 #eee' style={{width:'100%'}}>
                            <CText color='#494949' size='26'>反馈类型</CText>
                        </CRow>

                        {/* 类型 */}
                        <CBetween px='10' py='18' bb='1 #eee'>
                            {/* {this.state.type.map(item => {
                                return ( */}
                                    
                                    {/* <CHand key={item.name} bg='#cef1e1' ba='2 #31ba72' ra='10' w='160' mr='28' my='12' x='center'>
                                        <CText color='#31ba72' pa='12' size="22">{item.name}</CText>
                                    </CHand> */}
                                {/* )
                            })} */}
                            <CHand x='left' f='1'>
                                {
                                    this.state.type == '功能问题' ? <Text style={[ Design.global.selectButtonActive, {width:65} ]} onPress={e=>{this.changeType('功能问题')}}>功能问题</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:65} ]} onPress={e=>{this.changeType('功能问题')}}>功能问题</Text>
                                }
                            </CHand>
                            <CHand x='center' f='1'>
                                {
                                    this.state.type == '使用问题' ? <Text style={[ Design.global.selectButtonActive, {width:65} ]} onPress={e=>{this.changeType('使用问题')}}>使用问题</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:65} ]} onPress={e=>{this.changeType('使用问题')}}>使用问题</Text>
                                }
                            </CHand>
                            <CHand x='center' f='1'>
                                {
                                    this.state.type == '性能问题' ? <Text style={[ Design.global.selectButtonActive, {width:65} ]} onPress={e=>{this.changeType('性能问题')}}>性能问题</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:65} ]} onPress={e=>{this.changeType('性能问题')}}>性能问题</Text>
                                }
                            </CHand>
                            <CHand x='right' f='1'>
                                {
                                    this.state.type == '其他问题' ? <Text style={[ Design.global.selectButtonActive, {width:65} ]} onPress={e=>{this.changeType('其他问题')}}>其他问题</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:65} ]} onPress={e=>{this.changeType('其他问题')}}>其他问题</Text>
                                }
                            </CHand>
                        </CBetween>

                        {/* 联系方式 */}
                        <CBetween y='center' py='10' bb='1 #eee'>
                            <CText size='26' mr='10' df>联系方式</CText>
                            <TextInput
                                value={this.state.phone}
                                underlineColorAndroid='transparent'
                                placeholder='请输入您的联系方式'
                                style={{textAlign:'right',height:30,lineHeight:30,paddingTop:0,paddingBottom:0,flex:1,fontSize:14}}
                            />
                        </CBetween>

                        {/* 留言反馈标题 */}
                        <CRow h='80' y='center' >
                            <CText size='26'>留言反馈</CText>
                        </CRow>

                        {/* 留言多行输入框 */}
                        <CRow style={{width:'100%'}}>
                            <TextInput
                                underlineColorAndroid='transparent'
                                placeholder='请输入您的宝贵意见'
                                placeholderCTextColor="#c9c9c9"
                                style={{fontSize:14, lineHeight:28, borderWidth:1,borderColor:'#eee',borderRadius:3,width:'100%',height:130,textAlignVertical:'top',padding:10}}
                            />
                        </CRow>
                    </CColumn>

                    {/* 反馈提交按钮 */}
                    <CColumn py='10' mt='40' px='30'>
                        <CButton {...Design.global.commonButton} onPress={e=>this.submit()}>提交</CButton>
                    </CColumn>
                   
				</CScroll>
				
                {/* header */}
				<PHeader nav={this.nav}>意见反馈</PHeader>
                
			</CPage>
		);
	}
}
